import React from "react";
import {
  Tooltip,
  Stack,
  Fieldset,
  RadioGroup,
  Group,
  Radio,
  Switch,
  NumberInput,
  ActionIcon,
} from "@mantine/core";
import {modals} from "@mantine/modals";
import {notifications} from "@mantine/notifications";
import {IconSwitch3} from "@tabler/icons-react";

export const IpdSimuTrans = ({disabled}: {disabled: boolean}) => {
  return (
    <Tooltip
      label="转换规则配置"
      withArrow
      position="bottom"
      transitionProps={{transition: "fade", duration: 300}}
      onClick={() => {
        // 这是从后端获取的，修改和提交都是对这个格式的数据进行操作
        // 注意：整体应该是个表单，注意使用useForm。打开有默认值，修改后提交能触发后台更新
        const transRule = {
          range: "all",
          rule: [
            {type: "100G-400G", disabled: false, count: 5},
            {type: "10G-100G", disabled: true, count: 5},
            {type: "1G-10G", disabled: false, count: 5},
          ],
        };
        modals.openConfirmModal({
          title: "转换规则配置",
          children: (
            <Stack>
              <Fieldset legend="一、设置转换规则（范围）">
                <RadioGroup
                  name="transRuleSetting"
                  label="转换规则应用范围"
                  description="转换规则在哪些部分生效"
                  defaultValue={transRule.range}
                  withAsterisk
                >
                  <Group mt="xs">
                    <Radio value="all" label="全部转换" />
                    <Radio value="new" label="仅新增部分转换" />
                    <Radio value="none" label="全部不转换" />
                  </Group>
                </RadioGroup>
              </Fieldset>
              <Fieldset
                legend="二、设置转换规则（方式）"
                variant={transRule.range === "none" ? "filled" : "default"}
              >
                <Stack>
                  <Group>
                    <Switch size="md" onLabel="ON" offLabel="OFF" />
                    <NumberInput
                      label="400G升档规则"
                      description="多少条100G升级为1条400G"
                      placeholder="请输入数量"
                      min={0}
                      style={{flexGrow: 1}}
                    />
                  </Group>
                  <Group>
                    <Switch size="md" onLabel="ON" offLabel="OFF" />
                    <NumberInput
                      label="100G升档规则"
                      description="多少条10G升级为1条100G"
                      placeholder="请输入数量"
                      min={0}
                      style={{flexGrow: 1}}
                    />
                  </Group>
                  <Group>
                    <Switch size="md" onLabel="ON" offLabel="OFF" />
                    <NumberInput
                      label="10G升档规则"
                      description="多少条1G升级为1条10G"
                      placeholder="请输入数量"
                      min={0}
                      style={{flexGrow: 1}}
                    />
                  </Group>
                </Stack>
              </Fieldset>
            </Stack>
          ),
          labels: {confirm: "确定", cancel: "取消"},
          onCancel: () => console.log("Cancel"),
          onConfirm: () => {
            console.log("Confirmed");
            notifications.show({
              color: "green",
              title: "转换规则配置",
              message: "转换规则配置成功",
            });
          },
        });
      }}
    >
      <ActionIcon variant="light" color="violet" disabled={disabled}>
        <IconSwitch3 size={16} />
      </ActionIcon>
    </Tooltip>
  );
};
